<script setup>
// import * as mockjs from "mockjs";
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import request from "@/utils/request";
import englishToChinese from '@/json/post';
import englishToChinese2 from '@/json/department';

import { useShipStore } from '@/stores/ship';

const store = useShipStore()

const tmp_ship_id = ref('');
tmp_ship_id.value = "CN20067408805";

const translateJsonText = (jsonObject, translate) => {
  var tmpArray = []
  Object.keys(jsonObject).forEach(function (key) {
    var obj = {
      name: translate[key] || key,
      value: jsonObject[key]
    }
    tmpArray.push(obj)
  })
  // console.log(tmpArray)
  return tmpArray
}

onMounted(() => {
  initChart01();
  initChart02();
})

const initChart01 = async () => {
  var chartDom = document.getElementById('box1');
  var staff_info_json = await request.get("/staff_info/query_ship_id?ship_id=" + tmp_ship_id.value);
  var myChart = echarts.init(chartDom);

  var option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'left',
      orient: "vertical",
    },
    series: [
      {
        name: '船舶配员信息（甲板部、轮机部、客运部）',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: translateJsonText(staff_info_json, englishToChinese)
      }
    ]
  };

  option && myChart.setOption(option);
};

const initChart02 = async () => {
  var chartDom = document.getElementById('box2');
  var myChart = echarts.init(chartDom);

  var department_info_json = await request.get("/staff_info/query_ship_id/department?ship_id=" + tmp_ship_id.value);
  var option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'left',
      orient: "vertical",
    },
    series: [
      {
        name: '船舶配员信息（甲板部、轮机部、客运部）',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: translateJsonText(department_info_json, englishToChinese2)
      }
    ]
  };
  option && myChart.setOption(option);
}


//  mockjs 假数据
// let data1 = mockjs.mock({
//     "data": "@cname()",
//     "age": "@integer(1,100)",
//     "addr": "@city(true)",
//     "email": "@email(qq.com)",
// })
// // console.log(data1);

// let data2 = mockjs.mock({
//     "list|5": [
//         {
//             '邮箱': /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
//             '汉字': /[\u4E00-\u9FA5]{3}/,
//             '手机号': /^1[345789]\d{9}$/,
//             'IP地址': /((25[0-5]|2[0-4]\d|[01]\d?)\.){3}(25[0-5]|2[0-4]\d|[01]\d?)/
//         }
//     ]
// })
// // console.log(data2);

// let data3 = mockjs.mock({
//     "code": 0,
//     "data|3-5": [
//         {
//             "id|+1": "1",
//             "name": "@cname()",
//             "age": "@integer(1,100)",
//             "addr": "@city(true)",
//             "email": "@email(qq.com)",
//         }
//     ]
// })
// console.log(data3);

</script>

<template>
  <div class="app-wrapper">
    <div id="box1" style="width: 800px ;height: 500px"></div>
    <div id="box2" style="width: 700px ;height: 700px"></div>
    <div class="module-border-wrap">
      <div class="module">
       
      </div>
    </div>

  </div>
</template>

<style lang='scss' scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;

  .module-border-wrap {
    max-width: 250px;
    padding: 1rem;
    position: relative;
    background: linear-gradient(to right, blue, cyan);
    padding: 3px;
  }

  .module {
    background: #222;
    color: white;
    padding: 2rem;
  }
}
</style>